<template>
	<view class="box-bg">
		<uni-nav-bar 
			shadow 
			color="#F7F7F7" 
			left-icon="left" 
			backgroundColor="#3485FD" 
			height="65px" 
			title="导航" 
			@clickLeft="back" 
		/>
	</view>
	<view class="xiaoxi">
	  <view class="top">
	    <view class="card">
	      <map :latitude="34.826135" :longitude="113.558813" :markers="markers" :polyline="polyline" :controls="controls" :include-points="includePoints" :show-location="true" :show-scale="true" :enable-3d="true" :enable-overlooking="true" :enable-rotate="true" :enable-scroll-geometry="true"></map>
	    </view>
	
	    <view class="daohang">
	      <view class="jiayouzhan">
	        <view class="jiayouzhan-1">
	          <view class="jiayouzhan-1-1">中国石油加油站</view>
	          <view class="jiayouzhan-1-2">山阳区人民路与解放路交叉口</view>
	        </view>
	        <view class="daohang-1">
	          <view class="daohang-1-1">导航</view>
	        </view>
	      </view>
	    </view>
	  </view>
	</view>
</template>

<script setup>
import { ref } from 'vue'

// 定义地图数据
const markers = ref([])
const polyline = ref([])
const controls = ref([])
const includePoints = ref([])

// 返回上一页方法
const back = () => {
  uni.navigateBack()
}
</script>
<style>
	.box-bg{
		position: fixed;
		width: 100%;
		top: 0;
		z-index: 1000;
	}
	.xiaoxi {
	  width: 100%;
	  height: 100%;
	  position: absolute;
	  background-color: #f7f7f7;
	}
	
	.top {
	  width: 100%;
	  height: 400rpx;
	  background-color: rgb(52, 134, 253);
	  background-size: cover;
	}
	.card {
	  border-radius: 20rpx;
	  height: 1270rpx;
	  position: relative;
	  top:160rpx;
	  width: 96%;
	  margin-left: 2%;
	  background-color: white
	}
	
	.card map{
	  width: 96%;
	  height: 1220rpx;
	  margin-left: 2%;
	  position: relative;
	  top:25rpx
	}
	.daohang {
	  background-color: white;
	  position: fixed;
	  left: 0;
	  right: 0;
	  bottom: 0;
	  height: 150rpx;
	  padding: 0 50rpx;
	}
	
	.daohang-1 {
	  width: 25%;
	  display: flex;
	  align-items: center;
	  background-color: #4e9cfe;
	  height: 60rpx;
	  border-radius: 30rpx;
	  justify-content: center;
	  margin-top: 30rpx;
	}
	
	.daohang-1-1 {
	  font-size: 30rpx;
	  color: white;
	}
	
	.jiayouzhan{
	  display: flex;
	  align-items: center;
	  justify-content: space-between;
	  margin: 30rpx 0;
	}
	
	.jiayouzhan-1{
	  width: 60%;
	}
	
	.jiayouzhan-1-1{
	  font-size: 30rpx;
	  color: black;
	  margin-bottom: 15rpx;
	}
	
	.jiayouzhan-1-2{
	  font-size: 24rpx;
	  color: #999;
	}
</style>